// 发请求,获取商品数据
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
    if(req.readyState == 4){
        console.log(req.responseText);
        var data = JSON.parse(req.responseText);
        console.log(data);
        var list = data.data.list;
        console.log(list);

        var main = document.createElement('main');
        document.body.appendChild(main);
        for(var i = 0 ; i < list.length ;i++){
            // 一格
            var cell = document.createElement('div');
            main.appendChild(cell);
            
            //左侧图片
            var img = document.createElement('img');
            img.src = list[i].goodsurl;
            img.classList.add('leftImg');
            cell.appendChild(img);
            
            // 右侧内容
            var rightSec = document.createElement('section');
            rightSec.classList.add('rightSec');
            cell.appendChild(rightSec);
            
            // 标题
            var titleH3 = document.createElement('h3');
            titleH3.innerHTML = list[i].goodsname;
            rightSec.appendChild(titleH3);
            //描述 description
            var descP = document.createElement('p');
            descP.innerHTML = list[i].goodsdesc;
            descP.classList.add('descP');
            rightSec.appendChild(descP);
            
            // 价格
            var priceP = document.createElement('p');
            priceP.classList.add('priceP');
            rightSec.appendChild(priceP);
            // 整数 
            var span1 = document.createElement('span');
            // parseInt():把参数转化为整数
            span1.innerHTML = parseInt(list[i].sellprice);
            priceP.appendChild(span1);
            // 小数部分
            var span2 = document.createElement('span');
            // split():用某个子串分隔字符串为多部分,返回值是数组
            var digit = list[i].sellprice.split('.')[1];
            span2.innerHTML = '.'+digit;
            priceP.appendChild(span2);
            // 判断label中是否有内容，有，则添加
            if(list[i].label.length>0){
                var label = list[i].label;
                for(var j = 0 ; j < label.length ;j ++){
                    var span3 = document.createElement('span');
                    span3.innerHTML = label[j];
                    span3.classList.add('seckill');
                    priceP.appendChild(span3);
                }
            }

            //comment
            var commentP = document.createElement('p');
            commentP.innerHTML = (list[i].purchasenum>0?(list[i].purchasenum+'购买'):'') + ' ' + list[i].praiserate + '%好评';
            rightSec.appendChild(commentP);
        }
    }
}
req.open('GET','api/goods.php');
req.send();


// 纯js创建标签,添加到页面上

// 字符串拼标签
// '<main><div></div></main>';